<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多人聊天室</title>
	<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="chat/style.css">
	<link rel="stylesheet" type="text/css" href="chat/main.css">
	<script type="text/javascript" src="node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>
</head>
<body>
	<div id="loginbox" class="container">
		<div class="row">
			<div class="login-content">
				<h2>请先输入你在聊天室的昵称</h2>
				<br />
				<br />
				<div class="row">
					<div class="col-md-8">
						<input type="text" class="form-control" placeholder="请输入用户名" id="username" name="username" />
					</div>
					<div class="col-md-4">
						<input type="button" class="btn btn-primary" style="width: 50px;" value="提交" onclick="CHAT.usernameSubmit();" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="chatbox" style="display: none;">
		<div style="background: #3d3d3d; height: 28px; width: 100%; font-size: 12px;">
			<div style="line-height: 28px; color: #fff;">
				<span style="text-align: left; margin-left: 10px;">Websocket多人聊天室</span>
				<span style="float: right; margin-right: 10px;"><span id="showusername"></span> | <a href="javascript:;" onclick="CHAT.logout();" style="color: #fff;">退出</a></span>
			</div>
		</div>
		<div id="doc">
			<div id="chat">
				<div id="message" class="message">
					<div id="onlinecount" style="background: #efeff4; font-size: 12px; margin-top: 10px; margin-left: 10px; color: #666;"></div>
				</div>
				<div class="input-box">
					<div class="input">
						<input type="text" maxlength="140" placeholder="请输入聊天内容，按Ctrl提交" id="content" name="content" />
					</div>
					<div class="action">
						<button type="button" id="mjr_send" onclick="CHAT.submit();">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="chat/client.js"></script>
</body>
</html>


















